<template>
  <div id="app">
    <Nav></Nav>
		<el-breadcrumb separator-class="el-icon-arrow-right" class="bread">
			<el-breadcrumb-item><a href="index.html">首页</a></el-breadcrumb-item>
			<el-breadcrumb-item>{{FirstCategory}}</el-breadcrumb-item>
			<el-breadcrumb-item>{{SecondCategory}}</el-breadcrumb-item>
		</el-breadcrumb>
    <AsideNav v-on:getName="getFirst"/>
  </div>
</template>

<script>
import AsideNav from '../../components/AsideNav'
import Nav from '../../components/Nav'
export default {
  name: 'App',
  components: {
    AsideNav,
		Nav
  },
  data(){
    return{
      FirstCategory:'',
      SecondCategory:''
    }
  },
  methods:{
    getFirst:function(name){
      this.FirstCategory=name.f;
      this.SecondCategory=name.s
    },
  },
    mounted:function(){
      var url=window.location.search;
        if(url!==''){
          let i=url.indexOf('=')+1;
          url = url.substr(i);
          switch(url) {
          case '1':
              this.FirstCategory='桌子',
              this.SecondCategory='茶桌'
          break;
          case '2':
              this.FirstCategory='沙发',
              this.SecondCategory='组合沙发'
          break;
          case '3':
              this.FirstCategory='床',
              this.SecondCategory='双人床'
          break;
          case '4':
              this.FirstCategory='茶几',
              this.SecondCategory='边几'
          break;
          case '5':
              this.FirstCategory='柜子',
              this.SecondCategory='儿童柜'
          break;
          case '6':
              this.FirstCategory='椅子',
              this.SecondCategory='休闲椅'
          break;
        
          } 
        }
       
   }
  
}
</script>

<style lang="less">
@import '../../theme/style.less';
#app{
    width: 1180px;
    margin: 100px auto 0;

    .bread{
      margin:8px 0
    }
}
</style>
